<template>
  <div>
    <el-dialog title="上传发票" :visible.sync="addfp" width="50%">
      <span>
        <div class="sad">
          <el-steps :active="active" finish-status="success">
            <el-step title="步骤 1"></el-step>
            <el-step title="步骤 2"></el-step>
            <el-step v-if="flag" title="步骤 3"></el-step>
            <el-step v-if="!flag" title="完成"></el-step>
            <el-step v-if="flag" title="完成"></el-step>
          </el-steps>
          <!-- 发票类型 -->
          <el-card v-show="active == 1">
            <div class="qssxa">
              <p>请选择一种发票类型</p>
              <el-radio v-model="radio" class="ewsa" label="1">增值税发票</el-radio>
              <el-radio v-model="radio" label="2">其他发票</el-radio>
              <el-radio v-model="radio" label="3">机票</el-radio>
            </div>
          </el-card>
          <!-- 发票上传 -->
          <el-card v-show="active == 2">
            <div class="scewm">
              <p class="wqeqws">扫描二维码上传发票</p>
              <div class="flex_evenly">
                <img :src="erweima" alt="二维码">
              </div>
            </div>
          </el-card>
          <!-- 发票信息录入 -->
          <el-card v-show="active == 3" v-if="flag">
            <div class="wqs">
              <p>
                <span>
                  发票类型：
                  <el-select v-model="fapiao" size="mini" placeholder="请选择">
                    <el-option value="餐费"></el-option>
                    <el-option value="交通费"></el-option>
                    <el-option value="住宿费"></el-option>
                  </el-select>
                </span>
                <span>
                  税率：
                  <el-input v-model="input1" disabled="disabled" class="wsat" size="small" placeholder="请输入内容"></el-input>
                </span>
              </p>

              <p>
                <span>
                  发票号：
                  <el-input v-model="input2" class="wsa" size="mini" placeholder="请输入内容"></el-input>
                </span>
                <span class="qwwqa">
                  发票日期：
                  <el-date-picker v-model="input3" class="darapicker" size="small" type="date" placeholder="选择日期"></el-date-picker>
                </span>
              </p>

              <p>
                <span>
                  发票金额：
                  <el-input v-model="input4" class="sada" size="small" placeholder="请输入内容"></el-input>
                </span>
                <span>
                  税额：
                  <el-input v-model="input5" class="tuns" disabled="disabled" size="small" placeholder="请输入内容"></el-input>
                </span>
              </p>
            </div>
            <div class="asdarvs">
              <el-row>
                <el-col class="left_img" :span="12">
                  <el-image :src="url" :preview-src-list="srcList"></el-image>
                </el-col>
                <el-col class="img_list" :span="12">
                  <el-row>
                    <el-col :span="24">
                      <el-row>
                        <el-col :span="12">
                          <el-image :src="url" :preview-src-list="srcList"></el-image>
                        </el-col>
                        <el-col :span="12">
                          <el-image :src="url" :preview-src-list="srcList"></el-image>
                        </el-col>
                      </el-row>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <el-row>
                        <el-col :span="12">
                          <el-image :src="url" :preview-src-list="srcList"></el-image>
                        </el-col>
                        <el-col :span="12">
                          <el-image :src="url" :preview-src-list="srcList"></el-image>
                        </el-col>
                      </el-row>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </div>
          </el-card>
          <el-card v-show="active == 3" v-if="!flag" class="wqeqc">
            <div class="qweqs">你已完成所有步骤</div>
            <el-row>
              <el-col class="left_img" :span="12">
                <el-image :src="url" :preview-src-list="srcList"></el-image>
              </el-col>
              <el-col class="img_list" :span="12">
                <el-row>
                  <el-col :span="24">
                    <el-row>
                      <el-col :span="12">
                        <el-image :src="url" :preview-src-list="srcList"></el-image>
                      </el-col>
                      <el-col :span="12">
                        <el-image :src="url" :preview-src-list="srcList"></el-image>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-row>
                      <el-col :span="12">
                        <el-image :src="url" :preview-src-list="srcList"></el-image>
                      </el-col>
                      <el-col :span="12">
                        <el-image :src="url" :preview-src-list="srcList"></el-image>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>

          </el-card>
          <el-card v-show="active == 4" v-if="flag" class="easas">
            <div class="sdaiu">你已完成所有步骤</div>
            <div class="yufdins">
              <p>
                <span class="wqsuiy">
                  发票类型：
                  <span>{{ fapiao }}</span>
                </span>
                <span class="wsat">
                  税率：
                  <span>{{ input1 }}</span>
                </span>
                <span class="wsa">
                  发票号：
                  <span>{{ input2 }}</span>
                </span>
              </p>
              <p>
                <span class="yodn">
                  发票日期：
                  <span>{{ input3 }}</span>
                </span>
                <span class="reds">
                  发票金额：
                  <span>{{ input4 }}</span>
                </span>
                <span class="tuns">
                  税额：
                  <span>{{ input5 }}</span>
                </span>
              </p>
            </div>
            <el-row>
              <el-col class="left_img" :span="12">
                <el-image :src="url" :preview-src-list="srcList"></el-image>
              </el-col>
              <el-col class="img_list" :span="12">
                <el-row>
                  <el-col :span="24">
                    <el-row>
                      <el-col :span="12">
                        <el-image :src="url" :preview-src-list="srcList"></el-image>
                      </el-col>
                      <el-col :span="12">
                        <el-image :src="url" :preview-src-list="srcList"></el-image>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-row>
                      <el-col :span="12">
                        <el-image :src="url" :preview-src-list="srcList"></el-image>
                      </el-col>
                      <el-col :span="12">
                        <el-image :src="url" :preview-src-list="srcList"></el-image>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-card>
        </div>
        <!-- 发票列表 -->
        <div v-show="active == 1">
          <!-- <el-button class="qwes" @click="prev">上一步</el-button> -->
          <el-button size="small" class="qwes wsax" style="margin-top: 12px;" @click="next">下一步</el-button>
        </div>
        <div v-show="active == 2">
          <el-button size="small" class="qwes" @click="prev">上一步</el-button>
          <el-button size="small" type="info" style="margin-top: 12px;" @click="next">下一步</el-button>
        </div>

        <div v-show="active == 3" v-if="!flag">
          <el-button size="small" class="qwes" @click="prev">上一步</el-button>
          <el-button size="small" type="primary" @click="finish">完成</el-button>
        </div>

        <div v-show="active == 3" v-if="flag">
          <el-button size="small" class="qwes" @click="prev">上一步</el-button>
          <el-button size="small" type="info" style="margin-top: 12px;" @click="next">下一步</el-button>
        </div>
        <div v-show="active == 4">
          <el-button size="small" class="qwes" @click="prev">上一步</el-button>
          <el-button size="small" type="primary" @click="finish">完成</el-button>
        </div>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 控制是否显示模态框
      addfp: true,
      flag: false,
      active: 1,
      radio: '1',
      input: '',
      fapiao: '交通费',
      input1: '6%',
      input2: '03237003',
      input3: '2020-04-01',
      input4: '1000,4232,232',
      input5: '13%',
      erweima: require('@/assets/img/erweima.jpg'),
      url: require('@/assets/img/fa(1).jpg'),
      srcList: [require('@/assets/img/fa(1).jpg'), require('@/assets/img/fa(4).jpg')]
    }
  },
  methods: {
    // 点击下一步
    openfp() {
      this.addfp = true
    },
    next() {
      this.flag = false
      // 判断是不是其他发票
      if (this.radio === 2) {
        this.flag = true
      }
      if (this.active++ > 3) {
        this.active = 1
      }
    },
    prev() {
      if (this.active-- < 2) {
        console.log(111)
        this.active = 1
      }
    },
    finish() {
      this.active = 1

      this.addfp = false
    }
  }
}
</script>

<style lang="scss" scoped>
.img_list{
  .el-image{
    padding:5px;
  }
}
.left_img{
  .el-image{
    padding:10px;
  }
}
.sad {
  width: 90%;
  margin: 0 auto;

  .el-card {
    margin-top: 25px;
  }
  .qssxa {
    margin: 0 auto;
    p {
      text-align: center;
      margin-top: 18px;
    }
    .ewsa {
      margin-left: 33%;
    }
    .el-radio {
      margin-top: 50px;
      margin-bottom: 20px;
    }
  }
  .picture {
    margin-left: 28%;
    span {
      margin-top: 18px;
      margin-right: 10%;
    }
    .qwdq {
      display: inline-block;
      width: 37%;
      vertical-align: middle;
    }
  }
  .wqeqc {
    p {
      display: inline-block;
    }
    .qweqs {
      text-align: center;
      font-size: 16px;
      color: #00a0ff;
    }
    .redsd {
      width: 50%;
      .el-image {
        display: inline-block;
        width: 93%;
        margin-left: 5%;
        margin-top: 5%;
      }
    }
    .wqws {
      width: 50%;
      .el-image {
        display: inline-block;

        width: 42%;
        margin-left: 7%;
        margin-top: 5%;
      }
    }
  }
  .easas {
    .sdaiu {
      text-align: center;
      font-size: 16px;
      color: #00a0ff;
    }
    .wqws {
      width: 50%;
      .el-image {
        display: inline-block;

        width: 42%;
        margin-left: 7%;
        margin-top: 5%;
      }
    }
  }
}
::v-deep .el-image-viewer__img {
  transform: scale(1.1) rotate(0deg) !important;
  margin-left: 0px;
  margin-top: -60px !important;
  max-height: 100%;
  max-width: 100%;
}
.wqs {
  position: relative;
  p {
    margin-top: 20px;
    width: 98%;

    span {
      margin-right: 4%;
      margin-left: 5%;
      .el-input {
        width: 30%;
      }
      .el-select {
        width: 30%;
      }
    }
    .qwwqa {
      position: absolute;
      left: 47%;
      top: 37%;
      display: inline-block;
      width: 43%;
      margin-right: 0%;
      .el-input {
        width: 67%;
      }
    }
    .wsa {
      margin-left: 2%;
    }
  }
}

// 完成部分
.yufdins {
  position: relative;
  p {
    margin-top: 20px;
    width: 100%;

    span {
      margin-right: 7%;
      .el-input {
        width: 23%;
      }
      .el-select {
        width: 23%;
      }
    }
    .wqsuiy {
      margin-left: 5%;
    }
    .yodn {
      margin-left: 5%;
    }
    .wsa {
      margin-left: 3%;
      margin-right: 0%;
    }
    .wsat {
      margin-left: 7%;
    }
    .tuns {
      margin-left: 0%;
      margin-right: 0%;
    }
    .reds {
      margin-left: -2%;
      margin-right: 0%;
    }
  }
}

.asdarvs {
  p {
    display: inline-block;
  }
  .saday {
    width: 50%;
    .el-image {
      display: inline-block;
      width: 93%;
      margin-left: 5%;
      margin-top: 5%;
    }
  }
  .ewqw {
    width: 50%;
    .el-image {
      display: inline-block;

      width: 42%;
      margin-left: 7%;
      margin-top: 5%;
    }
  }
}

.scewm {
  .wqeqws {
    text-align: center;
    padding-bottom: 10px;
  }
  img {
    // width: 100px;
    height: 100px;
    // padding-left: 43%;
  }
}
.qwes {
  margin-top: 12px;
  /* margin: 0 auto; */
  margin-left: 38%;
}
.wsax {
  margin-left: 45%;
}

::v-deep .el-dialog__body {
  padding: 30px 20px !important;
}
::v-deep .el-dialog__header {
  padding: 20px 20px 10px !important;
}
</style>
